<template>
	<div class="up_down_com">
		<div class="work_box">
			<div class="title">
				{{$t('home.amount')}}
			</div>
			<div class="work_text" @click="handleWork()">
				{{$t('home.howItWorks')}}
				<img src="@/assets/images/home/wen.png" class="img" />
			</div>
		</div>
		<div class="input_box">
			<el-input v-model="input" @input="inputFun">
				<template slot="prefix">
					<div style="height: 100%;display: flex;align-items: center;justify-content: center;padding-left: 5px;">
						<img src="@/assets/images/home/usdt.png" style="width: 24px;" />
					</div>
				</template>
				<template slot="append">
					<el-button @click="handleHalf()">1/2</el-button>
					<el-button @click="handleAcc()">x2</el-button>
				</template>
			</el-input>
			<!-- <div class="but_box"> -->
			<!-- <el-popover placement="bottom" width="60" trigger="click" :visible-arrow="false" popper-class="tick tick2"
					v-model="hasCoin">
					<el-button slot="reference">USDT</el-button>
					<div class="coin_item active">
						<i class="el-icon-check"></i>
						USDT
					</div>
				</el-popover> -->
			<!-- <el-popover placement="bottom" width="60" trigger="click" :visible-arrow="false" popper-class="tick tick2"
					v-model="hasTime">
					<el-button slot="reference">
						{{timeList[timeIndex]?.seconds_text}}
						<i class="el-icon-caret-bottom"></i>
					</el-button>
					<div class="time_item" :class="timeIndex == index ? 'active' : ''" v-for="(item,index) in timeList"
						:key="index" @click="handleTime(index)">
						<i class="el-icon-check" v-if="timeIndex == index"></i>
						<span>{{item?.seconds_text}}</span>
					</div>
				</el-popover> -->
			<!-- </div> -->
		</div>
		<div class="time_box">
			<div class="time_title">{{$t('home.timeTitle')}}</div>
			<div class="time_list">
				<div class="item_time" :class="timeIndex == index ? 'active' : ''" v-for="(item,index) in timeList" :key="index"
					@click="handleTime(index)">
					{{item?.seconds_text}}
				</div>
			</div>
		</div>
		<div class="up_down_title">{{$t('home.lowOrHigt')}}</div>
		<div class="up_down_img_box">
			<div class="img_box cur_p" @click="handleDown(2)">
				{{oddObj.down}}% {{$t('home.down')}}
				<img src="@/assets/images/home/down.png" class="icon" />
			</div>
			<div class="img_box cur_p" @click="handleDown(1)">
				<img src="@/assets/images/home/up.png" class="icon" />
				{{$t('home.up')}}
				{{oddObj.up}}%
			</div>
		</div>
		<van-popup v-model="showConfirm">
			<div class="info_box">
				<div class="title_box">
					<div class="coin_box">
						<div class="img_box">
							<img src="@/assets/images/home/BTC.png" />
							<img src="@/assets/images/home/usdt.png" />
						</div>
						{{matches ? matches.symbol : 'BTC/USDT'}}
					</div>
					<!-- <img src="@/assets/images/home/close.png"  /> -->
					<i class="el-icon-close close" @click="handleClose()"></i>
				</div>
				<div class="info_item">
					{{$t('home.openPrice')}}
					<div class="info">
						<img src="@/assets/images/home/zhang.png" />
						{{newOrderPrice.price || newOrderPrice.open}}
					</div>
				</div>
				<div class="info_item">
					{{$t('home.amount')}}
					<div class="info">
						{{input}} USDT
					</div>
				</div>
				<div class="info_item">
					{{$t('home.currentTime')}}
					<div class="info">
						{{$day(newOrderPrice.time).format('HH:mm:ss')}}
					</div>
				</div>
				<el-button class="but" @click="handlePlaxe()">{{$t('home.plaxeOrder')}}</el-button>
			</div>
		</van-popup>
		<van-popup v-model="showWork" class="work_popup">
			<div class="work_info_box">
				<div class="work_title">
					{{title}}
					<van-icon name="cross" class="close_icon" size="18" color="#fff" @click="showWork = false" />
				</div>
				<div v-html="workInfo" class="html">

				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import {
		microtradeSubmit,
		microtradeOdds,
		defaultSetting,
		microtradeSeconds,
		defaultSettingAmount
	} from '@/api/home'
	export default {
		props: {},
		components: {},
		data() {
			return {
				hasCoin: false,
				hasTime: false,
				showWork: false,
				showConfirm: false, // 二次确认
				workInfo: '',
				input: 10,
				timeIndex: 0,
				downType: 0, // 下注type 1涨 2跌
				maxAmount: 0, // 游客最多下注数量
				timeList: [],
				allOdd: [],
				// timeList2: [15, 30, 60],
				oddObj: {},
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
			matches() {
				return this.$store.state.matches
			},
			newOdd() {
				return this.$store.state.newOdd
			},
			newOrderPrice() {
				return this.$store.state.newOrderPrice
			},
			title() {
				return this.$t('home.howItWorks')
			},
			balance() {
				return this.$store.state.balance
			}
		},
		watch: {
			newOdd(val) {
				if (val) {
					// console.log('timeList::::', this.timeList, this.timeIndex);
					let seconds = this.timeList[this.timeIndex].seconds
					this.allOdd = val;
					this.oddObj = val.find(i => i.seconds == seconds)
				}
			},
			timeIndex(val) {
				let seconds = this.timeList[val].seconds
				this.oddObj = this.allOdd.find(i => i.seconds == seconds)
			},
			async matches(val) {
				if (val) {
					await this.getSeconds()
					this.getOdd()
				}
			}
		},
		async mounted() {
			this.getAmount()
			// await this.getSeconds()
			// this.getOdd()
			// console.log('matches', this.convertSecondsToFormattedString('110'));
		},
		methods: {
			inputFun(val) {
				let num = val.replace(/[^\d]/g, '')
				console.log('val', val, num, this.maxAmount);
				if (this.userInfo.is_test_number == 1) {
					console.log('val2', this.maxAmount, num > Number(this.maxAmount));
					if (num > Number(this.maxAmount)) {
						num = this.maxAmount
					}
				} else {
					if (num > this.balance) {
						num = this.balance
					}
				}
				this.input = num
			},
			handleTime(index) {
				this.timeIndex = index
				this.hasTime = false;
			},
			handleHalf() {
				if (this.input > 0 && Number(this.input) / 2 > 0 && Math.ceil(Number(this.input) / 2) >= Number(this.timeList[
						this.timeIndex].start_num)) {
					this.input = Math.ceil(Number(this.input) / 2)
				} else {
					let str = `${this.$t('home.minimum')} ${Number(this.timeList[this.timeIndex].start_num)}`;
					this.$message(str)
				}
			},
			handleAcc() {
				if (this.userInfo.is_test_number == 1) {
					if (Number(this.input) * 2 <= Number(this.maxAmount)) {
						this.input = Number(this.input) * 2
					}else {
						this.input = this.maxAmount
					}
				} else {
					if (Number(this.input) * 2 <= this.balance) {
						this.input = Number(this.input) * 2
					}
				}
			},
			async handleDown(type) {
				if (this.input < 1) {
					this.$message(this.$t('home.minimum'))
					return
				}
				if (localStorage.getItem('1click') === 'true') {
					this.handlePlaxe(type)
				} else {
					this.downType = type
					this.showConfirm = true
				}
			},
			async handlePlaxe(type) {
				const res = await microtradeSubmit({
					match_id: this.matches.id,
					seconds: this.timeList[this.timeIndex].seconds,
					number: this.input,
					type: type || this.downType,
				})
				// console.log('res', res);
				if (res && res.code == 1) {
					this.showConfirm = false
					this.$store.dispatch('getBalance')
					this.$store.commit('onChangeTips', 1)
					// this.$message.success(res.msg)
				} else if (res.code == 505) {
					// this.$message.error(res.msg)
					this.$store.commit('onChangeTips', 2)
				} else {
					this.$store.commit('onChangeTips', {
						type: 4,
						msg: res.msg
					})
				}
			},
			async getOdd() {
				const res = await microtradeOdds({
					match_id: this.matches.id,
				})
				// console.log('res::::', res);
				if (res && res.code == 1) {
					let seconds = this.timeList[this.timeIndex].seconds
					this.allOdd = res.data
					this.oddObj = this.allOdd.find(i => i.seconds = seconds)
				}
			},
			async getSeconds() {
				const res = await microtradeSeconds({
					match_id: this.matches.id,
				})
				// console.log('秒数：：', res, this.matches);
				if (res && res.code == 1) {
					this.timeList = res.data.map(i => {
						return {
							...i,
							seconds_text: this.convertSecondsToFormattedString(i.seconds)
						}
					})
				}
			},
			handleClose() {
				this.showConfirm = false;
			},
			async getAmount() {
				const resAmount = await defaultSettingAmount()
				console.log('resAmount', resAmount);
				if (resAmount && resAmount.code == 1) {
					this.maxAmount = resAmount.data
				}
			},
			async handleWork() {
				const res = await defaultSetting()
				// console.log('res', res);
				if (res && res.code == 1) {
					let lang = localStorage.getItem('lang') ? localStorage.getItem('lang') : this.$utils.getUserLang()
					this.workInfo = res.data[lang]
					this.showWork = true
				}
			},
			convertSecondsToFormattedString(seconds) {
				let result = '';
				if (seconds >= 60) {
					const minutes = Math.floor(seconds / 60);
					const remainingSeconds = seconds % 60;
					if (minutes > 0) {
						result += minutes + 'm';
					}
					if (remainingSeconds > 0) {
						result += remainingSeconds + 's';
					}
				} else {
					result += seconds + 's';
				}
				return result;
			}
		}
	}
</script>

<style scoped lang="less">
	.up_down_com {
		padding: 24px 18px;
		background-color: #1B232E;
		border-radius: 16px;
		// margin-bottom: 12px;
		height: 100%;

		.work_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 15px;

			.title {
				font-size: 14px;
				font-weight: bold;
				color: #fff;
			}

			.work_text {
				display: flex;
				align-items: center;
				font-size: 14px;
				color: #fff;
				cursor: pointer;

				.img {
					width: 18px;
					margin-left: 10px;
				}
			}
		}

		.input_box {
			display: flex;
			align-items: center;
			margin-bottom: 30px;

			::v-deep .el-input {
				background-color: #161D26;
				border-radius: 12px;
				overflow: hidden;
			}

			::v-deep .el-input__inner {
				height: 48px;
				line-height: 48px;
				background-color: #161D26;
				border: none;
				color: #fff;
				padding-left: 40px;
			}

			::v-deep .el-input-group__append {
				border: none;
				background-color: transparent;
				padding-right: 0;
				padding-left: 10px;
			}

			::v-deep .el-button {
				min-width: 48px;
				height: 36px;
				padding: 10px;
				font-size: 12px;
				// color: #A4A8AB;
				color: #fff;
				margin: 6px;
				background-color: #212A36;
				border: 0;
				font-weight: bold;
			}

			.but_box {
				display: flex;
			}
		}

		.time_box {
			margin-bottom: 30px;
			text-align: left;

			.time_title {
				font-size: 14px;
				font-weight: bold;
				margin-bottom: 18px;
			}

			.time_list {
				display: flex;
				align-items: center;

				.item_time {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 8px;
					height: 48px;
					border-radius: 12px;
					background-color: #293444;
					font-weight: bold;
					cursor: pointer;
				}

				.item_time:last-of-type {
					margin-right: 0;
				}

				.active {
					border: 2px solid #137EFE;
				}
			}
		}

		.up_down_title {
			font-size: 14px;
			font-weight: bold;
			margin-bottom: 18px;
			text-align: left;
		}

		.up_down_img_box {
			display: flex;
			align-items: center;
			font-weight: bold;

			.img_box {
				width: 50%;
				height: 48px;
				background: url('~@/assets/images/home/red_B.png') no-repeat;
				background-size: 100% 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				transition: all 0.3s ease;

				&:active {
					// transform: translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(.95) scaleY(.95);
					animation: butActive .5s linear;
					animation-fill-mode: forwards;
				}

				@keyframes butActive {

					0% {
						transform: scaleX(.95) scaleY(.95);
					}

					50% {
						transform: scaleX(.95) scaleY(.95);
					}

					90% {
						transform: scaleX(.95) scaleY(.95);
					}

					100% {
						transform: scaleX(1) scaleY(1);
					}
				}

				.icon {
					width: 24px;
					height: 24px;
					margin-left: 12px;
				}
			}

			.img_box:last-of-type {
				background: url('~@/assets/images/home/green_B.png') no-repeat;
				background-size: 100% 100%;

				.icon {
					margin-left: 0;
					margin-right: 12px;
				}
			}
		}

		::v-deep .van-popup {
			background-color: #212A36;
			border-radius: 18px;
			padding: 26px 30px;
			width: 450px;




			.title_box {
				// border-bottom: 1px solid #353F4C;
				margin-bottom: 30px;
				// padding: 0 0 15px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.coin_box {
					display: flex;
					align-items: center;
					font-size: 16px;
					font-weight: bold;

					.img_box {
						display: flex;

						img {
							position: relative;
							z-index: 2;
							width: 24px;
							border-radius: 50%;
						}

						img+img {
							margin-left: -10px;
							z-index: 1;
							margin-right: 5px;
						}
					}
				}

				.close {
					// width: 20px;
					font-size: 20px;
					font-weight: bold;
					cursor: pointer;
				}
			}

			.info_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #A4A8AB;
				margin-bottom: 13px;

				.info {
					color: #fff;

					img {
						width: 10px;
						margin-right: 5px;
					}
				}
			}

			// .info_item:last-of-type {
			// 	margin-bottom: 0;
			// }

			.but {
				width: 100%;
				height: 48px;
				background-color: #137EFE;
				border: 0;
				border-radius: 10px;
				padding: 15px;
				color: #fff;
				font-size: 16px;
				margin-top: 17px;

			}
		}

		::v-deep .work_popup {
			width: 672px;
			padding: 0 30px 30px;
			max-height: 80vh;

			&::-webkit-scrollbar {
				width: 5px;
			}

			&::-webkit-scrollbar-thumb {
				border-radius: 5px;
				background: #293444;
			}

			.work_info_box {
				position: relative;

				.work_title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24px;
					font-weight: bold;
					margin-bottom: 30px;
					position: sticky;
					top: 0;
					left: 0;
					padding-top: 30px;
					background-color: #212A36;
					padding-bottom: 5px;

					i {
						font-weight: bold;
						cursor: pointer;
					}
				}

				.html {

					text-align: left;
					line-height: 1.5;

				}
			}
		}

	}
</style>

<style lang="less">
	body .tick2 {
		padding: 6px 4px;
	}

	body .coin_item,
	body .time_item {
		text-align: center;
		height: 42px;
		font-size: 14px;
		color: #A4A8AB;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 0;
		cursor: pointer;

		&.active {
			background-color: #293444;
			border-radius: 6px;
			padding-left: 0;
			color: #fff;
		}

		span {
			width: 50%;
			text-align: center;
		}
	}
</style>